<%--
  Created by IntelliJ IDEA.
  User: 常肖飞先生
  Date: 2022/5/17
  Time: 20:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <script src="https://apps.bdimg.com//libs/jquery/2.1.4/jquery.min.js"></script>
    <title>用户注册</title>
</head>
<body>
<font color="red" size="10">用户注册</font>
<br>
用户名：<input type="text" name="username" id="username"><br>
<span id="sp" ></span><br>
密码：<input type="password" name="pwd" id="pwd"><br>
<input type="button" value="注册" onclick="regist()"/>
<script type="text/javascript">
   /** function regist() {
        //1. 获取input输入框的值
      var username = document.getElementById("username").value;
        //2. 进行验证, 输入的值不为null
        if (username != null && username != ""){
            //3. 创建ajax对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                //浏览器是IE7+，firefox,chrome,sfari等
                xmlhttp = new XMLHttpRequest();
            }else {
                //浏览器是IE5或者IE6
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //4.设置监听,监听返回的状态码
            xmlhttp.onreadystatechange = function (){
                //readystate状态码为4代表请求完成，响应已经就绪
                //state状态码为200代表http请求成功
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    //5.获取响应的数据
                    var result = xmlhttp.responseText;

                    //6.将返回的数据操作DOM填充到页面中显示
                    //获取id叫做sp的对象
                    var sp = document.getElementById("sp");

                    if (result == "1"){
                        //该用户可以注册
                     var html= "<font color='green'>恭喜您可以注册！</font>";
                     sp.innerHTML = html;
                    }else {
                        //该用户已经存在
                        var html = "<font color='red'>不好意思，该用户已存在！</font>";
                        sp.innerHTML = html;
                    }
                }
            }
            //7、设置Ajax的请求方式和请求路径 pageContext.request.contextPath
            xmlhttp.open("POST","/registServlet",true);

            //8、设置Ajax 的请求头
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

            //9、发送请求
            xmlhttp.send("name="+username);
        }
    }
    **/
  $(function () {
     //当鼠标单击button 注册按钮的时候，触发操作
     $("[type='button']").click(function () {
         //1.获取input输入框的值
         var username = $("#username").val();

         //2、进行验证，输入的值不为null
         if (username != null  && username != ""){

             //3、使用jQuery  的post方式Ajax操作
             $.post("${pageContext.request.contextPath}/registServlet",{
                 name:username
             },function (result) {
                 //4、获取服务器返回的回调数据进行处理展示
                 if (result == "1"){
                     //该用户可以注册
                     var htmlStr = "<font color='green'>恭喜您可以注册</font>";
                     $("#sp").html(htmlStr);
                 } else{
                     //该用户已经存在
                     var htmlStr = "<font color='red'>不好意思，该用户已经存在啊</font>";
                     $("#sp").html(htmlStr);
                 }
             });
         }
     }) ;
  });
</script>
</body>
</html>
